'use client'
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import { Mousewheel, Pagination } from 'swiper/modules';
import "./weiGao.css" // 引入样式文件
import 'swiper/css/mousewheel';
import 'swiper/css/pagination';
import { useEffect, useMemo, useRef, useState } from 'react';
import WG1View from './component/WG1';
import WG2View from './component/WG2';
import WG3View from './component/WG3';
import WG4View from './component/WG4';
import WG5View from './component/WG5';
import TopWG from './component/Topindex';
import MenuButton from './component/MeanButton';

const WGList = ['威高', '产品', '关于', '新闻', ''];

const WeiGaoView: React.FC = () => {
    const [activeIndex, setActiveIndex] = useState<number>(0);
    const swiperRef = useRef<SwiperClass | null>(null);
    const [IsOpenPageList, setIsOpenPageList] = useState<string[]>([]);
    const pagination = {
        clickable: true,
        renderBullet: (index: number, className: string) => {
            // 只显示圆点，文字用 CSS 伪元素显示
            return `<span class="${className}" data-title="${WGList[index]}"></span>`;
        },
    };

    useEffect(() => {
        if (swiperRef.current && swiperRef.current.pagination) {
            swiperRef.current.pagination.update();
        }
    }, [activeIndex]);

    function handleSlideChange(swiper: SwiperClass): void {
        setActiveIndex(swiper.activeIndex);
    }
    const TopClassbg = useMemo(() => {
        return activeIndex === 0 ? "rgba(0,0,0,0)" : "rgba(255,255,255)";
    }, [activeIndex]);
    const handleMean = () => {
        const index = IsOpenPageList.indexOf("curtainClass1");
        if (index !== -1) {
            setIsOpenPageList(['curtainClass2']);
        } else {
            setIsOpenPageList(['curtainClass1']);
        }
    }
    return (
        <div className='weiGao-swiper-wrapper h-screen overflow-hidden relative'>
            <div className='TopClassMain'>
                <TopWG TopClassbg={TopClassbg} ></TopWG>
            </div>
            <div className="MeanClass"> <MenuButton
                meanClick={handleMean}
                MenuBar={`${activeIndex === 0 ? 'rgba(255,255,255)' : 'rgba(24, 43, 98)'}`}>
            </MenuButton></div>

            <Swiper
                onSwiper={(swiper) => (swiperRef.current = swiper)}
                direction={'vertical'}
                observer={true}
                observeParents={true}
                mousewheel={{
                    sensitivity: 1,
                    invert: false
                }}
                spaceBetween={10}
                slidesPerView={1}
                pagination={pagination}
                modules={[Mousewheel, Pagination]}
                style={{ height: '100%' }}
                onSlideChange={handleSlideChange}
            >
                {WGList.map((title, idx) => (

                    <SwiperSlide key={idx} className={`h-full bg-gray-${100 + idx * 100} flex items-center justify-center text-4xl`}>
                        {activeIndex == 0 && <WG1View />}
                        {activeIndex == 1 && <WG2View activeMainIndex={activeIndex} />}
                        {activeIndex == 2 && <WG3View activeMainIndex={activeIndex} />}
                        {activeIndex == 3 && <WG4View />}
                        {activeIndex == 4 && <WG5View />}
                    </SwiperSlide>
                ))}
            </Swiper>
            <div className={IsOpenPageList.join(' ')}></div>
        </div >
    );
};

export default WeiGaoView;